<!--党员学习底部导航-->
<template>
  <!-- 底部tabbar    start -->
  <nav class="mui-bar mui-bar-tab mui-row tabbar-bottom schedule-foot">
    <a @click="clickNav(0)" class="mui-col-xs-4 mui-col-sm-4 flex-column flex-center" href="javascript:void(0)">
      <img v-if="partyFooterBarIndex!=0" src="../../../../static/images/zzsh_richeng.png" alt="学习计划">
      <img v-if="partyFooterBarIndex==0" src="../../../../static/images/zzsh_richeng_on.png" alt="学习计划">
      <p class="mui-tab-label">学习计划</p>
    </a>
    <a @click="clickNav(1)" class="mui-col-xs-4 mui-col-sm-4 flex-column flex-center" href="javascript:void(0)">
      <img v-if="partyFooterBarIndex!=1" src="../../../../static/images/zzsh_record.png" alt="答题记录">
      <img v-if="partyFooterBarIndex==1" src="../../../../static/images/zzsh_record_on.png" alt="答题记录">
      <p class="mui-tab-label">答题记录</p>
    </a>
    <a v-if="flag" @click="clickNav(2)" class="mui-col-xs-4 mui-col-sm-4 flex-column flex-center"
       href="javascript:void(0)">
      <img v-if="partyFooterBarIndex!=2" src="../../../../static/images/zzsh_tongji.png" alt="学习统计">
      <img v-if="partyFooterBarIndex==2" src="../../../../static/images/zzsh_tongji_on.png" alt="学习统计">
      <p class="mui-tab-label">学习统计</p>
    </a>
  </nav>
  <!-- 底部tabbar    end -->
</template>
<script>
  import tools from '@/utils/tools'

  export default {
    name: 'partyMemberLearningFooterbar',
    data () {
      return {
        fn: tools,
        navList: ['study', 'answerRecord', 'studyStatistics'],
        partyFooterBarIndex: this.$store.state.partyFooterBarIndex || 0,
        flag: false
      }
    },
    created () {
      this.$store.state.partyFooterBarIndex = this.partyFooterBarIndex = this.navList.indexOf(this.$route.name)
      window.loginPage = () => {
        this.$router.push({'name': 'login'})
      }
      try {
        if (this.$localStorage.get('userInfo')) {
          this.$store.state.userInfo = this.$localStorage.get('userInfo')
        } else {
        }
        let roleType = this.$localStorage.get('roleType')
        if (roleType) {
          if (this.fn.hasRoleType(roleType)) {
            this.flag = true
          }
        }
      } catch (e) {
      }
    },
    methods: {
      clickNav (index) {
        this.currentIndex = index
        this.$store.state.partyFooterBarIndex = index
        this.$router.push({'name': this.navList[index]})
      }
    },
    watch: {
      $route (to, from) {
      }
    },
    mounted () {
    }
  }
</script>

<style scoped="" lang="scss">
  .schedule-foot {
    display: flex;

    .flex-column {
      flex: 1;
      float: none;
    }
  }
</style>
